<template>
  <section>
    <el-form label-width="90px" size="mini">
      <el-form-item label="订单标题：">
        <el-input v-model="orderForm.title" style="width: 20%" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="选择用户：">
        <el-select v-model="selCustomer"  :filterable="true" clearable  remote :reserve-keyword="false" size="mini" allow-create
                   default-first-option  placeholder="请输入姓名" :remote-method="remoteMethod" value-key="id">
          <el-option v-for="(customer,index) in customerList" :key="index" :label="customer.name" :value="customer" v-if="customerList">
            <span style="float: left">{{ customer.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ customer.phone }}</span>
          </el-option>
        </el-select>
        <el-select v-model="selMember" value-key="id" v-if="memberList && memberList.length>0" size="mini">
          <el-option v-for="(member,index) in memberList" :key="index" :label="member.userName" :value="member" >
            <span style="float: left">{{ member.userName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ member.phone }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择商品：">
        <el-select v-model="selGoods"  :filterable="true" clearable  remote :reserve-keyword="false" size="mini" allow-create
                   default-first-option  placeholder="商品关键字" :remote-method="getMallGoodsList" value-key="id">
          <el-option v-for="(goods,index) in mallGoodsList" :key="index" :label="goods.title" :value="goods"/>
        </el-select>
        <!--<el-select v-model="selGoods" placeholder="商品" size="mini" value-key="id">-->
          <!--<el-option v-for="goods in mallGoodsList" :key="goods.id" :label="goods.title" :value="goods"/>-->
          <!--<el-pagination v-show="totalPage>0" layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>-->
        <!--</el-select>-->
      </el-form-item>
      <el-form-item label="商品Sku："  v-if="selGoods">
        <el-select v-model="selGoodsSku" placeholder="商品规格" size="mini"  @visible-change="selSkuBtn" value-key="id">
          <el-option v-for="goodsSku in selGoods.goodsSkus" :key="goodsSku.id" :label="goodsSku.props" :value="goodsSku"></el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="订单优惠：" v-if="selGoods">-->
        <!--<el-input size="mini" v-model="orderForm.salePrice" style="width:200px"/>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="地址："  v-if="orderAddress">-->
        <!--在这里选地址-->
      <!--</el-form-item>-->
    </el-form>
  </section>
</template>

<script>
  import { mapActions,mapGetters} from 'vuex'
  import DateFormat from '@/common/date-formater'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "new-order-base",
    props:['orderForm'],
    data() {
      return {
        customerList:null,
        selCustomer:null,
        selMember:null,
        memberList:null,
        //  选择user，member，为需要customer的sku做准备
        totalPage:0,
        selGoods:null,
        selGoodsSku:null,
        mallGoodsList:[]
      }
    },
    watch:{
      selCustomer(nv,ov){
        if(nv){
          this.selMember=null
          this.memberList=null
          if(typeof(nv) === "string"){
            //跳出新建用户的对话框
            this.$message('未找到该用户，请确认用户是否存在！')
          }else this.getMembersByCustomer(nv.name)
        }
      },
      selMember(nv,ov){
        if(nv){
          if(nv.customers.length<=0){
            this.$message('该账户下还未绑定用户，请确认！')
            return
          }
          console.log('选中了！')
          this.orderForm.departmentId=this.department.id
          this.orderForm.memberId=nv.id
          this.$emit('getCustomerList',nv.customers)
          //获取账户下的优惠券
        }
      },
      selGoods(nv,ov){
        if(nv){
          console.log('看下选中的商品-------',nv)
        }
      },
      selGoodsSku(nv,ov){
        if(nv){
          console.log('看下选中的商品sku-------',nv)
          let data={...nv.data.props,businessTypeCode:nv.data.businessTypeCode}
          let tmp={
            title:this.selGoods.title,
            skuId:nv.id,
            price:nv.price,
            sale:nv.sale,
            props:nv.props,
            sn:nv.sn,
            data,
            num:1
          }
          if(nv.data.props.needCustomerId) tmp.customerIds=['']
          this.$emit('selSku',tmp)
        }
      }
    },
    computed: {
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      remoteMethod(keywords) {
        clearTimeout()
        setTimeout(()=>{
          this.fetch({name:"getUserList",data:{keywords}})
            .then(res=>{
              this.customerList=res.content
            })
            .catch(err=>{
              console.log(err)
              errHandler.handle(this,err)
            })},500)
      },
      getMembersByCustomer(keywords){
        this.fetch({name:"getMembersByCustomer",data:{keywords}})
          .then(res=>{
            if(res.length<=0){
              this.$message('该用户还未绑定账户，请确认！')
              return
            }
            this.memberList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      selSkuBtn(e){
        console.log('什么情况------',e)
        if(e === true){
          this.selGoodsSku = null
        }
      },
      goPage(val){
        this.getMallGoodsList(val-1)
      },
      getMallGoodsList(e){
        console.log('看一下------',e)
        this.fetch({name:"getMallGoodsList",data:{storeId:this.department.id,key:e}})
          .then(res=>{
            console.log('商品列表—————————',res)
            this.mallGoodsList=res.content
            // this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
